// 背景动态效果 JavaScript
(function() {
    'use strict';
    
    // 注入CSS样式
    function injectCSS() {
        const style = document.createElement('style');
        style.textContent = `
            /* 动态背景容器 */
            .dynamic-background {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: -1;
                overflow: hidden;
                background: linear-gradient(45deg, #f0f8ff, #e6f3ff, #ffffff, #f5f5f5);
                background-size: 400% 400%;
                animation: gradientShift 15s ease infinite;
            }
            
            /* 渐变动画 */
            @keyframes gradientShift {
                0% {
                    background-position: 0% 50%;
                }
                50% {
                    background-position: 100% 50%;
                }
                100% {
                    background-position: 0% 50%;
                }
            }
            
            /* 粒子效果 */
            .particle {
                position: absolute;
                border-radius: 50%;
                background: rgba(0, 123, 255, 0.2);
                animation: float 20s infinite linear;
                pointer-events: none;
                box-shadow: 0 0 10px rgba(0, 123, 255, 0.1);
            }
            
            @keyframes float {
                0% {
                    transform: translateY(100vh) rotate(0deg);
                    opacity: 0;
                }
                10% {
                    opacity: 1;
                }
                80% {
                    opacity: 1;
                }
                100% {
                    transform: translateY(10vh) rotate(360deg);
                    opacity: 0;
                }
            }
            
            /* 光晕效果 */
            .glow-orb {
                position: absolute;
                border-radius: 50%;
                background: radial-gradient(circle, rgba(0, 123, 255, 0.25) 0%, transparent 70%);
                animation: glow 8s ease-in-out infinite;
                pointer-events: none;
            }
            
            @keyframes glow {
                0%, 100% {
                    transform: scale(1) translateX(0);
                    opacity: 0.3;
                }
                50% {
                    transform: scale(1.2) translateX(20px);
                    opacity: 0.6;
                }
            }
            
            /* 波纹效果 */
            .wave {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 100px;
                background: linear-gradient(to top, rgba(0, 123, 255, 0.05), transparent);
                animation: wave 10s ease-in-out infinite;
                pointer-events: none;
            }
            
            @keyframes wave {
                0%, 100% {
                    transform: translateX(0) scaleY(1);
                }
                50% {
                    transform: translateX(-50px) scaleY(1.1);
                }
            }
        `;
        document.head.appendChild(style);
    }
    
    // 创建动态背景容器
    function createBackgroundContainer() {
        const container = document.createElement('div');
        container.className = 'dynamic-background';
        document.body.insertBefore(container, document.body.firstChild);
        return container;
    }
    
    // 创建粒子
    function createParticle(container) {
        const particle = document.createElement('div');
        particle.className = 'particle';
        
        // 随机大小和位置
        const size = Math.random() * 15 + 8;
        const left = Math.random() * 100;
        const animationDuration = Math.random() * 10 + 15;
        const delay = Math.random() * 5;
        
        particle.style.width = size + 'px';
        particle.style.height = size + 'px';
        particle.style.left = left + '%';
        particle.style.animationDuration = animationDuration + 's';
        particle.style.animationDelay = delay + 's';
        
        container.appendChild(particle);
        
        // 动画结束后移除粒子
        setTimeout(() => {
            if (particle.parentNode) {
                particle.parentNode.removeChild(particle);
            }
        }, (animationDuration + delay) * 1000);
    }
    
    // 创建光晕
    function createGlowOrb(container) {
        const orb = document.createElement('div');
        orb.className = 'glow-orb';
        
        const size = Math.random() * 200 + 100;
        const left = Math.random() * 80 + 10;
        const top = Math.random() * 60 + 20;
        const duration = Math.random() * 5 + 6;
        
        orb.style.width = size + 'px';
        orb.style.height = size + 'px';
        orb.style.left = left + '%';
        orb.style.top = top + '%';
        orb.style.animationDuration = duration + 's';
        
        container.appendChild(orb);
    }
    
    // 创建波纹效果
    function createWave(container) {
        const wave = document.createElement('div');
        wave.className = 'wave';
        container.appendChild(wave);
    }
    
    // 初始化动画
    function initAnimation() {
        const container = createBackgroundContainer();
        
        // 创建初始光晕
        for (let i = 0; i < 6; i++) {
            createGlowOrb(container);
        }
        
        // 创建波纹
        createWave(container);
        
        // 定期创建粒子
        setInterval(() => {
            createParticle(container);
        }, 400);
        
        // 额外的粒子生成器，增加密度
        setInterval(() => {
            createParticle(container);
            createParticle(container);
        }, 600);
        
        // 定期更新光晕
        setInterval(() => {
            // 移除旧光晕
            const oldOrbs = container.querySelectorAll('.glow-orb');
            if (oldOrbs.length > 8) {
                oldOrbs[0].remove();
            }
            createGlowOrb(container);
        }, 3000);
    }
    
    // 页面加载完成后初始化
    function init() {
        // 注入CSS
        injectCSS();
        
        // 等待DOM加载完成
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initAnimation);
        } else {
            initAnimation();
        }
    }
    
    // 启动
    init();
})();